<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>for循环嵌套</title>
  <style>
    span {
      width: 100px;
      text-align: center;
      display: inline-block;
      padding: 5px 10px;
      border: 1px solid pink;
      margin: 2px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px pink;
    }
  </style>
</head>

<body>
  <script>
    for (let i = 1; i <= 3; i++) {
      document.write(`第${i}天<br>`)
      for (let j = 1; j <= 5; j++) {
        document.write(`学习了第${j}个单词<br>`)
      }
    }
    document.write('<hr>')

    // 5行5列的星星
    // 外层循环循环行
    // 内层循环循环列

    // 打印5行
    for (let i = 1; i <= 5; i++) {
      // 打印5列
      for (let j = 1; j <= 5; j++) {
        document.write('☆')
      }
      // 内层循环一遍后,换行
      document.write('<br>')
    }

    document.write('<hr>')
    // 打印直角三角形
    for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= i; j++) {
        document.write('☆')
      }
      document.write('<br>')
    }
    document.write('<hr>')

    // 倒直角三角形
    for (let a = 5; a >= 1; a--) {
      for (let b = 1; b <= a; b++) {
        document.write('☆')
      }
      document.write('<br>')
    }

    document.write('<hr>')
    document.write('九九乘法表<br>')
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`<span>${i} × ${j} = ${i * j}</span>`)
      }
      document.write('<br>')
    }
  </script>
</body>

</html>